import React, { PureComponent } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View, Dimensions, ImageBackground } from "react-native";
import { connect } from 'react-redux';
import { TYText, Divider, BrickButton, Popup, Toast } from "tuya-panel-kit";
// import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';
import { Background } from 'tuya-panel-style-icon-background';
import { AcrylicArrowCard } from 'tuya-panel-acrylic-kit';
import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';
import SwitchButton from '../../components/SwitchButton';
import dpCodes from '../../config/dpCodes';
import { debounce } from '../../utils';
import TYSdk from '../../api';
import Res from "../../res";
import Strings from "../../i18n";
import style from "../../config/style";
import kColor from "../../config/kColor";

const TYDevice = TYSdk.device;

const {
  fishtank_switch: fishtank_switchCode,
  feed_protect_on: feed_protect_onCode,
  pet_food_out: pet_food_outCode,
  feeder_status: feeder_statusCode,
} = dpCodes;

class HomeFeedView extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      showToast: false,
    };

  }

  feedPopupClicked = (v => {
    console.log('喂食份数', v);
    Popup.list({
      type: 'radio',
      titleTextStyle: { fontSize: 16, fontWeight: 'bold' },
      styles: { title: { fontSize: 16, fontWeight: 'bold' } },
      // cancelTextStyle: { width: 100, height: 40, borderRadius: 20, textAlign: 'center', backgroundColor: '#afd8ea' },
      confirmTextStyle: { fontSize: 16, fontWeight: 'bold', color: '#22a8dc' },
      iconTintColor: '#22a8dc',
      maxItemNum: 7,
      dataSource: [
        {
          key: '1',
          title: Strings.formatValue('dialog_option_feed_count',1),//'1份',
          value: 1,
        },
        {
          key: '2',
          title: Strings.formatValue('dialog_option_feed_count',2),//'2份',
          value: 2,
        },
        {
          key: '3',
          title: Strings.formatValue('dialog_option_feed_count',3),//'3份',
          value: 3,
        },
      ],
      title: Strings.dialog_title_feed_count,//'份数',
      cancelText: Strings.cancel,//'取消',
      confirmText: Strings.ok,//'确认',
      // value: v,
      onMaskPress: ({ close }) => close(),
      onSelect: (value, { close }) => {
        // setState({ listValue: value });
      },
      onConfirm: (value, { close }) => {
        TYDevice.putDeviceData({
          [pet_food_outCode]: value,
        });
        close();
      },
    });
  });

  feedProtectClicked = debounce(v => {
    console.log('喂食保护', v);
    TYDevice.putDeviceData({
      [feed_protect_onCode]: v,
    });
  });

  feedTimerClicked = debounce(() => {
    console.log('喂食定时');
    TYSdk.Navigator.push({
      id: 'feedTimer',
    });
  });

  feedRecordClicked = debounce(() => {
    console.log('喂食记录');
    TYSdk.Navigator.push({
      id: 'feedRecord',
    });
  });

  // 喂食定时
  feedTimerView(fishtank_switch){
    return(
      <TouchableOpacity disabled={!fishtank_switch} style={styles.cell} onPress={() => { this.feedTimerClicked() }}>
        <View style={styles.iconAndText}>
          <ImageBackground style={styles.icon} resizeMode="center" source={Res.ftimer} />
          <Text style={[styles.cellTitle, kColor.theme[kColor.type].titleColor]}>{Strings.feeder_timer_title}</Text>
        </View>
        <Image style={styles.arrow} source={Res.enter} />
      </TouchableOpacity>
    );
  }

  // 分割线
  lineView() {
    return (
      <Divider style={{ marginTop:0, marginBottom:0, height:1, alignSelf: 'center' }} color={kColor.type === 'dark'?"#FFFFFF1F":"#0000001F"} width={Dimensions.get('window').width-64} />
    );
  }

  toastView(){
    const { showToast } = this.state;
    return(
      <Toast show={showToast} text={'喂食中'} onFinish={() => {
        this.setState( {showToast: false });
      }} />
    );
  }

  render() {
    const { feed_protect_on, feeder_status, fishtank_switch } = this.props;
    const isFeeding = feeder_status === 'Busy';
    return (
      <View style={[styles.container, kColor.theme[kColor.type].homeCardBgColor]}>
        <View style={[fishtank_switch ? style.grayHidden : style.grayBackground]}>
          {/* 喂食器 */}
          <View style={styles.cell}>
            <View style={styles.iconAndText}>
              <ImageBackground style={styles.icon} source={Res.ffeed} resizeMode="center" />
              <Text style={[styles.cellTitle, kColor.theme[kColor.type].titleColor]}>{Strings.feeder_title}</Text>
            </View>

            {/* 喂食 按钮 */}
            <BrickButton
              disabled={isFeeding || !fishtank_switch}
              text={Strings.feeder_button_title}
              textStyle={{ fontSize: 13, color: "#20AEE5" }}
              wrapperStyle={{ backgroundColor: "#ecf7fb", width: 80, height: 34, borderRadius: 17 }}
              loadingSize="large"
              style={{ marginRight: 20 }}
              onPress={() => {
                if (isFeeding) {
                  // this.setState( {showToast: true });
                } else {
                  this.feedPopupClicked(1);
                }

              }}
            />
          </View>

          { this.lineView() }

          {/* 喂食保护 */}
          <View style={styles.cell} >
            <View style={[styles.iconAndText]}>
              <ImageBackground style={styles.icon} source={Res.ffeedProtect} resizeMode="center" />
              <View style={[styles.twoLines,{marginRight: 40}]}>
                <Text style={[styles.cellTitle, kColor.theme[kColor.type].titleColor]}>{Strings.feeder_protect_title}</Text>
                <Text numberOfLines={3} ellipsizeMode='tail' style={[styles.cellTitle, kColor.theme[kColor.type].subTitleColor,{ marginRight: 0, fontSize: 13, fontWeight: '400', lineHeight: 18 }]}>
                  {Strings.feeder_protect_desc}
                </Text>
              </View>
            </View>

            <SwitchButton
              disabled={!fishtank_switch}
              style={{ marginRight: 20, width: 44 }}
              value={feed_protect_on}
              onValueChange={v => {
                this.feedProtectClicked(v);
              }}
            />
          </View>

          { this.lineView() }

          {/* 喂食定时 分享设备不显示 */}
          {TYSdk.devInfo.isShare ? null : this.feedTimerView(fishtank_switch)}

          { this.lineView() }

          {/* 喂食记录 */}
          <TouchableOpacity disabled={!fishtank_switch} style={styles.cell} onPress={() => {
            this.feedRecordClicked();
          }}>
            <View style={styles.iconAndText}>
              <ImageBackground style={styles.icon} resizeMode="center" source={Res.ffeedRecord} />
              <Text style={[styles.cellTitle, kColor.theme[kColor.type].titleColor]}>{Strings.feeder_record_title}</Text>
            </View>
            <Image style={styles.arrow} source={Res.enter} />
          </TouchableOpacity>

          {this.toastView()}

        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#1A1A1A',
    marginHorizontal: 10,
    marginTop: 10,
    marginRight: 10,
    borderRadius: 12,
    overflow: 'hidden',// 设置为hidden以裁剪子控件
  },
  cell: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    // backgroundColor: '#ac4545',
    height: 80,
    // width: Dimensions.get("window").width -20,
    marginRight:0,
    // borderRadius: 12,
  },
  twoLines: {
    // flex: 1,
    flexDirection: 'column',
    alignItems: 'stretch',
  },
  cellTitle: {
    marginLeft: 13,
    fontSize: 16,
    fontWeight: 'bold',
    lineHeight: 22,
    color: '#000',
  },
  iconAndText: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    justifyContent: 'center',
    marginStart: 20,
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#22a8dc',
  },
  arrow: {
    marginLeft: 5,
  },
});

export default connect(({ dpState }) => ({
  dpState,
  fishtank_switch: dpState[fishtank_switchCode],
  feed_protect_on: dpState[feed_protect_onCode],
  pet_food_out: dpState[pet_food_outCode],
  feeder_status: dpState[feeder_statusCode],
}))(HomeFeedView);
